<template>
    <div class="inventory-transaction-container">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>库存管理</el-breadcrumb-item>
            <el-breadcrumb-item>库存收发明细</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 页面标题 -->
        <div class="page-header">
            <h2>库存收发明细</h2>
            <p class="page-description">查看和管理所有库存相关的进出库操作记录</p>
        </div>



        <!-- 数据表格 -->
        <el-card class="table-card">
            <template #header>
                <div class="table-header">
                    <span>库存收发明细列表</span>
                    <div class="table-actions">
                        <el-button type="primary" @click="handleRefresh" :loading="loading">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                            刷新
                        </el-button>

                    </div>
                </div>
            </template>

            <el-table :data="tableData" v-loading="loading" stripe border style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column prop="productCode" label="产品编号" width="120" />
                <el-table-column prop="productName" label="产品名称" width="150" />
                <el-table-column prop="productSpec" label="产品规格" width="120" />
                <el-table-column prop="inventoryUnit" label="库存单位" width="80" />
                <el-table-column prop="transactionQuantity" label="单据数量" width="100" />
                <el-table-column prop="absoluteChangeQuantity" label="变更数量" width="100">
                    <template #default="{ row }">
                        <span :class="row.changeDirection === '入库' ? 'text-success' : 'text-danger'">
                            {{ row.changeDirection === '入库' ? '+' : '-' }}{{ row.absoluteChangeQuantity }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="changeDirection" label="变更方向" width="80">
                    <template #default="{ row }">
                        <el-tag :type="row.changeDirection === '入库' ? 'success' : 'danger'">
                            {{ row.changeDirection }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="transactionTime" label="事务时间" width="160">
                    <template #default="{ row }">
                        {{ formatDateTime(row.transactionTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="inventoryType" label="库存类型" width="120" />
                <el-table-column prop="sourceDocumentType" label="来源单据类型" width="120" />
                <el-table-column prop="sourceDocumentNo" label="来源单据编号" width="150" />
                <el-table-column prop="currentInventory" label="当前库存" width="100" />
                <el-table-column prop="creator" label="创建人" width="100" />
                <el-table-column prop="createTime" label="创建时间" width="160">
                    <template #default="{ row }">
                        {{ formatDateTime(row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="handleView(row)">
                            <el-icon>
                                <View />
                            </el-icon>
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination v-model:current-page="pagination.pageIndex" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 30, 50, 100]" :total="pagination.totalCount"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>

        
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Download, View } from '@element-plus/icons-vue'
import { getInventoryTransactionList, type InventoryTransactionDetailDTO, type InventoryTransactionQueryParams } from '@/api/inventoryTransaction'

// 响应式数据
const loading = ref(false)
const tableData = ref<InventoryTransactionDetailDTO[]>([])
const selectedRows = ref<InventoryTransactionDetailDTO[]>([])
const selectedRow = ref<InventoryTransactionDetailDTO | null>(null)
const detailDialogVisible = ref(false)



// 分页信息
const pagination = reactive({
    pageIndex: 1,
    pageSize: 30,
    totalCount: 0,
    totalPage: 0
})

// 计算属性
const hasSelection = computed(() => selectedRows.value.length > 0)

// 方法
const fetchData = async () => {
  loading.value = true
  try {
    const params: InventoryTransactionQueryParams = {
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize
    }

    const response = await getInventoryTransactionList(params)
    const result = response.data

    if (result.code === 200) {
      tableData.value = result.pageData
      pagination.totalCount = result.totalCount
      pagination.totalPage = result.totalPage
    } else {
      ElMessage.error(result.msg || '获取数据失败')
    }
  } catch (error) {
    console.error('获取库存事务列表失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
    pagination.pageIndex = 1
    fetchData()
}

const handleReset = () => {
    
    pagination.pageIndex = 1
    fetchData()
}

const handleRefresh = () => {
    fetchData()
}

const handleSizeChange = (size: number) => {
    pagination.pageSize = size
    pagination.pageIndex = 1
    fetchData()
}

const handleCurrentChange = (page: number) => {
    pagination.pageIndex = page
    fetchData()
}

const handleSelectionChange = (rows: InventoryTransactionDetailDTO[]) => {
    selectedRows.value = rows
}

const handleView = (row: InventoryTransactionDetailDTO) => {
    selectedRow.value = row
    detailDialogVisible.value = true
}

const handleExport = () => {
    ElMessage.info('导出功能开发中...')
}

const formatDateTime = (dateTime: string | undefined) => {
    if (!dateTime) return ''
    return new Date(dateTime).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}

// 生命周期
onMounted(() => {
    fetchData()
})
</script>

<style scoped>
.inventory-transaction-container {
    padding: 20px;
}

.page-header {
    margin-bottom: 20px;
}

.page-header h2 {
    margin: 0 0 8px 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

.page-description {
    margin: 0;
    color: #909399;
    font-size: 14px;
}

.search-card {
    margin-bottom: 20px;
}

.search-form {
    padding: 20px 0;
}

.table-card {
    margin-bottom: 20px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-actions {
    display: flex;
    gap: 10px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.text-success {
    color: #67c23a;
    font-weight: bold;
}

.text-danger {
    color: #f56c6c;
    font-weight: bold;
}

:deep(.el-table .el-table__row:hover) {
    background-color: #f5f7fa;
}

:deep(.el-descriptions__label) {
    font-weight: bold;
    color: #606266;
}

:deep(.el-descriptions__content) {
    color: #303133;
}
</style>
